<template>
  <div class="sentence-panel">
    <!-- 句子展示区 -->
    <div class="sentence-display">
      <p class="sentence-text">{{ currentSentence }}</p>
    </div>
    
    <!-- 按钮区 -->
    <div class="button-group">
      <van-button 
        type="primary" 
        size="normal"
        :loading="isRefreshing"
        @click="handleRefresh"
      >
        <template #icon>
          <van-icon name="replay" />
        </template>
        刷新
      </van-button>
      
      <van-button 
        type="default" 
        size="normal"
        @click="handleCopy"
      >
        <template #icon>
          <van-icon name="records" />
        </template>
        复制
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Button as VanButton, Icon as VanIcon, showToast } from 'vant'
import { getRandomSentence } from '../utils/sentenceBank'
import { copyToClipboard } from '../utils/copyUtil'

// 当前显示的句子
const currentSentence = ref('')
// 刷新加载状态
const isRefreshing = ref(false)

/**
 * 刷新句子
 */
const handleRefresh = async () => {
  isRefreshing.value = true
  
  // 模拟加载延迟（确保用户能看到加载状态）
  await new Promise(resolve => setTimeout(resolve, 200))
  
  // 获取新句子（避免重复）
  const newSentence = getRandomSentence(currentSentence.value)
  currentSentence.value = newSentence
  
  isRefreshing.value = false
}

/**
 * 复制句子
 */
const handleCopy = async () => {
  const success = await copyToClipboard(currentSentence.value)
  
  if (success) {
    showToast({
      message: '复制成功！',
      type: 'success',
      duration: 1500
    })
  } else {
    showToast({
      message: '复制失败，请重试',
      type: 'fail',
      duration: 2000
    })
  }
}

// 组件挂载时加载初始句子
onMounted(() => {
  currentSentence.value = getRandomSentence()
})
</script>

<style scoped>
.sentence-panel {
  width: 320px;
  height: 220px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 句子展示区 */
.sentence-display {
  flex: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.sentence-text {
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
  text-align: center;
  word-wrap: break-word;
  word-break: break-all;
  margin: 0;
}

/* 按钮区 */
.button-group {
  flex: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 16px 16px;
}

/* 按钮样式调整 */
.button-group :deep(.van-button) {
  min-width: 100px;
}
</style>

